<template>

  <div class="root-wrapper">
      <banner></banner>

    <div class="flex-row-bet" style="align-items: start">
      <chart-frame :width="47" :time="abnormalListUpdateTime" :min-height="400" title="异常寝室">
        <abnormal-list @abnormalListUpdateTime="abnormalListUpdateTimeHandler"></abnormal-list>
      </chart-frame>

      <div style="width: 47%">
        <div class="flex-col-bet">
          <info-cards></info-cards>
          <chart-frame class="h-100" :width="100" :min-height="0" title="实时功率" subtitle="Real Time Power">
            <chart-real-time-power></chart-real-time-power>
          </chart-frame>
      </div>


      </div>

    </div>

    <chart-frame :width="100" title="用电排行榜" subtitle="Usage Rank">
      <chart-usage-rank></chart-usage-rank>
    </chart-frame>

    <chart-frame :width="100" title="24小时用电统计" subtitle="24hrs History Usage Statistics ">
      <chart-24hrs-history-usage-statistics></chart-24hrs-history-usage-statistics>
    </chart-frame>
    <chart-frame :width="100" title="寝室楼栋统计" subtitle="History Usage by Dorm Block" :min-height="0">
      <dorm-block-grid></dorm-block-grid>
    </chart-frame>
    <chart-frame :width="100" title="整体用电统计" subtitle="History Usage Statistics"
                 :time="historyUsageStatUpdateTime">
      <chart-history-usage-statistics @historyUsageStatUpdateTime="historyUsageStatUpdateTimeHandler"></chart-history-usage-statistics>
    </chart-frame>


  <foot></foot>





  </div>

</template>

<script>
import banner from "../components/banner";
import ChartFrame from "../components/chart-frame";
import foot from "../components/foot";
import AbnormalList from "../components/abnormal-dorm-list";
import DormBlockGrid from "../components/dorm-block-grid"
import InfoCards from "../components/info-cards";

import chartHistoryUsageStatistics from "../components/charts/chart-history-usage-statistics";
import chartRealTimePower from "../components/charts/chart-real-time-power";
import chartUsageRank from "../components/charts/chart-usage-rank";
import chart24hrsHistoryUsageStatistics from "../components/charts/chart-24hrs-history-usage-statistics"

export default {
  name: "Home",
  components: {
    InfoCards,
    AbnormalList,
    banner,
    ChartFrame,
    foot,
    DormBlockGrid,

    chartHistoryUsageStatistics,
    chartRealTimePower,
    chartUsageRank,
    chart24hrsHistoryUsageStatistics,
  },

  mounted() {
    // this.welcomePrompt()
  },

  methods: {
    // welcomePrompt() {
    //     this.$alert('<div>本站点提供长沙理工大学云塘校区的电费统计信息</div>' +
    //       '我们向您推荐友情站点<a href="http://cyber-cynic-site" style="text-decoration: none; font-style: italic">Remind Me of the Electricity</a>，提醒您充值电费。', '欢迎您', {
    //       dangerouslyUseHTMLString: true
    //     })
    // }

    abnormalListUpdateTimeHandler(time) {
      this.abnormalListUpdateTime = time
    },
    historyUsageStatUpdateTimeHandler(time) {
      this.historyUsageStatUpdateTime = time
    }
  },

  data() {
    return {
      abnormalListUpdateTime: new Date().toDateString(),
      historyUsageStatUpdateTime: new Date().toDateString()
    }
  }
};
</script>

<style scoped>
.root-wrapper {
  /*box-sizing: border-box;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 220px;
}
</style>